<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>景区地图 - 江心漫屿</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- AMap (高德地图) API -->
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=73932d45f3704e0d4a780df26b5ac63c"></script>
    <link rel="stylesheet" href="css/map.css">
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- 状态栏已移除 - 全面屏设计 -->

    <!-- 顶部导航 -->
    <div class="bg-white px-6 py-4 shadow-sm">
        <div class="flex justify-between items-center">
            <div class="flex items-center space-x-3">
                <button class="text-gray-600">
                    <i class="fas fa-arrow-left text-xl"></i>
                </button>
                <h1 class="text-xl font-semibold text-gray-800">景区地图</h1>
            </div>
            <div class="flex space-x-3">
                <button class="bg-green-100 text-green-600 p-2 rounded-full">
                    <i class="fas fa-location-arrow"></i>
                </button>
                <button class="bg-gray-100 text-gray-600 p-2 rounded-full">
                    <i class="fas fa-layer-group"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- 搜索栏 -->
    <div class="px-6 py-3 bg-white border-b border-gray-100">
        <div class="relative">
            <input type="text" placeholder="搜索景点、服务设施..." 
                   class="w-full pl-10 pr-4 py-3 bg-gray-100 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-green-500">
            <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
        </div>
    </div>

    <!-- 地图容器 -->
    <div class="relative flex-1" style="height: 60vh;">
        <!-- 高德地图容器 -->
        <div id="map" class="w-full h-full"></div>

        <!-- 地图控制按钮 -->
        <div class="map-controls">
            <button class="control-btn" onclick="zoomIn()">
                <i class="fas fa-plus"></i>
            </button>
            <button class="control-btn" onclick="zoomOut()">
                <i class="fas fa-minus"></i>
            </button>
            <button class="control-btn" onclick="locateUser()">
                <i class="fas fa-compass"></i>
            </button>
        </div>
    </div>

    <!-- 底部信息面板 -->
    <div class="bottom-panel bg-white rounded-t-2xl shadow-lg">
        <div class="p-4">
            <div class="flex justify-between items-center mb-3">
                <h3 class="font-semibold text-gray-800">附近景点</h3>
                <button class="text-sm text-blue-500">查看全部</button>
            </div>
            
            <div class="space-y-3">
                <div class="nearby-item">
                    <div class="flex items-center space-x-3">
                        <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
                            <i class="fas fa-temple-chinese text-blue-600"></i>
                        </div>
                        <div class="flex-1">
                            <h4 class="font-medium text-gray-800">江心寺</h4>
                            <p class="text-sm text-gray-600">距离 200m · 步行 3分钟</p>
                        </div>
                        <div class="text-right">
                            <div class="flex items-center space-x-1">
                                <i class="fas fa-star text-yellow-400 text-xs"></i>
                                <span class="text-sm">4.8</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="nearby-item">
                    <div class="flex items-center space-x-3">
                        <div class="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center">
                            <i class="fas fa-tower-observation text-red-600"></i>
                        </div>
                        <div class="flex-1">
                            <h4 class="font-medium text-gray-800">东塔</h4>
                            <p class="text-sm text-gray-600">距离 350m · 步行 5分钟</p>
                        </div>
                        <div class="text-right">
                            <div class="flex items-center space-x-1">
                                <i class="fas fa-star text-yellow-400 text-xs"></i>
                                <span class="text-sm">4.9</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200">
        <div class="flex justify-around py-3">
            <div class="text-center">
                <i class="fas fa-home text-gray-400 text-xl mb-1"></i>
                <p class="text-xs text-gray-400">首页</p>
            </div>
            <div class="text-center">
                <i class="fas fa-map text-green-600 text-xl mb-1"></i>
                <p class="text-xs text-green-600">地图</p>
            </div>
            <div class="text-center">
                <i class="fas fa-vr-cardboard text-gray-400 text-xl mb-1"></i>
                <p class="text-xs text-gray-400">AR</p>
            </div>
            <div class="text-center">
                <i class="fas fa-shopping-bag text-gray-400 text-xl mb-1"></i>
                <p class="text-xs text-gray-400">商城</p>
            </div>
            <div class="text-center">
                <i class="fas fa-user text-gray-400 text-xl mb-1"></i>
                <p class="text-xs text-gray-400">我的</p>
            </div>
        </div>
    </div>

    <script>
        // 初始化高德地图
        let map;
        let attractionMarkers = [];

        // 景点数据
        const attractions = [
            {
                name: '江心寺',
                position: [120.6554, 28.0188],
                type: 'temple',
                icon: 'fa-temple-chinese',
                color: '#3B82F6',
                description: '千年古刹，江心屿的标志性建筑'
            },
            {
                name: '东塔',
                position: [120.6568, 28.0195],
                type: 'tower',
                icon: 'fa-tower-observation',
                color: '#EF4444',
                description: '宋代古塔，登塔可俯瞰全岛风光'
            },
            {
                name: '西塔',
                position: [120.6542, 28.0182],
                type: 'tower',
                icon: 'fa-tower-observation',
                color: '#EF4444',
                description: '与东塔遥相呼应，历史悠久'
            },
            {
                name: '游客中心',
                position: [120.6558, 28.019],
                type: 'info',
                icon: 'fa-info',
                color: '#10B981',
                description: '提供咨询、休息、购物等服务'
            },
            {
                name: '停车场',
                position: [120.6548, 28.0205],
                type: 'parking',
                icon: 'fa-parking',
                color: '#F59E0B',
                description: '景区主停车场，容量充足'
            },
            {
                name: '轮渡码头',
                position: [120.6562, 28.0175],
                type: 'ferry',
                icon: 'fa-ship',
                color: '#06B6D4',
                description: '前往江心屿的主要码头'
            }
        ];

        // 初始化地图
        function initMap() {
            map = new AMap.Map('map', {
                zoom: 16,
                center: [120.6554, 28.0188], // 江心屿中心坐标
                resizeEnable: true,
                rotateEnable: true,
                pitchEnable: true,
                pitch: 45,
                rotation: 0,
                viewMode: '3D', // 开启3D视图
                expandZoomRange: true,
                zooms: [10, 20],
                mapStyle: 'amap://styles/fresh' // 清新风格
            });

            // 添加地图控件
            map.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.ControlBar'], function() {
                map.addControl(new AMap.ToolBar({
                    position: {
                        top: '110px',
                        right: '40px'
                    }
                }));
                map.addControl(new AMap.Scale());
                map.addControl(new AMap.ControlBar({
                    position: {
                        top: '10px',
                        right: '10px'
                    }
                }));
            });

            // 添加景点标记
            addAttractionMarkers();
        }

        // 添加景点标记
        function addAttractionMarkers() {
            attractions.forEach(attraction => {
                // 创建自定义标记
                const markerContent = `
                    <div class="custom-marker" style="background-color: ${attraction.color}; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.3); border: 3px solid white;">
                        <i class="fas ${attraction.icon} text-white text-sm"></i>
                    </div>
                `;

                const marker = new AMap.Marker({
                    position: attraction.position,
                    content: markerContent,
                    title: attraction.name,
                    offset: new AMap.Pixel(-20, -20)
                });

                // 创建信息窗体
                const infoWindow = new AMap.InfoWindow({
                    content: `
                        <div class="p-3 min-w-48">
                            <h3 class="font-bold text-gray-800 mb-1">${attraction.name}</h3>
                            <p class="text-sm text-gray-600 mb-2">${attraction.description}</p>
                            <div class="flex space-x-2">
                                <button onclick="navigateToAttraction('${attraction.name}')" class="bg-blue-500 text-white px-3 py-1 rounded text-xs hover:bg-blue-600">
                                    导航
                                </button>
                                <button onclick="showAttractionDetail('${attraction.name}')" class="bg-green-500 text-white px-3 py-1 rounded text-xs hover:bg-green-600">
                                    详情
                                </button>
                            </div>
                        </div>
                    `,
                    offset: new AMap.Pixel(0, -30)
                });

                // 绑定点击事件
                marker.on('click', () => {
                    infoWindow.open(map, marker.getPosition());
                });

                marker.setMap(map);
                attractionMarkers.push(marker);
            });
        }

        // 获取用户位置功能已移除 - 只展示江心屿附近景点
        
        // 添加用户位置标记功能已移除

        // 地图控制函数
        function zoomIn() {
            map.zoomIn();
        }

        function zoomOut() {
            map.zoomOut();
        }

        function locateUser() {
            // 定位到江心屿中心，不获取用户位置
            map.setCenter([120.6554, 28.0188]);
            map.setZoom(18);
        }

        // 导航到景点
        function navigateToAttraction(name) {
            const attraction = attractions.find(a => a.name === name);
            if (attraction) {
                // 直接定位到景点，不显示路径规划
                map.setCenter(attraction.position);
                map.setZoom(18);
                
                // 触发标记点击事件显示信息窗口
                const marker = attractionMarkers.find(m => 
                    m.getTitle() === attraction.name
                );
                if (marker) {
                    marker.emit('click', {target: marker});
                }
            }
        }

        // 显示景点详情
        function showAttractionDetail(name) {
            alert(`正在加载 ${name} 的详细信息...`);
            // 这里可以跳转到具体的景点详情页面
        }

        // 搜索功能
        function searchAttraction(query) {
            if (!query) return;
            
            const found = attractions.find(attraction => 
                attraction.name.toLowerCase().includes(query.toLowerCase())
            );
            
            if (found) {
                map.setCenter(found.position);
                map.setZoom(18);
                
                // 触发标记点击事件
                const marker = attractionMarkers.find(m => 
                    m.getTitle() === found.name
                );
                if (marker) {
                    marker.emit('click', {target: marker});
                }
            } else {
                // 不弹出提示，静默处理
                console.log('未找到相关景点:', query);
            }
        }

        // 页面加载完成后初始化地图
        window.onload = function() {
            initMap();
        };

        // 用户定位相关CSS动画已移除
    </script>
    <script src="js/map.js"></script>
</body>
</html>